$(function($){
    // 对英雄的属性及皮肤的渲染

    // 获取元素
        let str=location.href;
        str=str.slice(str.indexOf('?')+1)
        id=str.slice(str.indexOf('=')+1)
        let neirong_1=$('.neirong_1')
        let power=$('.power');
        let bjgs=$('.bjgs');
        let syjq=$('.syjq');
        let jineng=$('.jineng');
        let jieshao=$('.jieshao');
        let touxiang=$('.touxiang');
        let res_pifu;
        let nr2_right=$('.nr2_right');
        let xingbei=$('.xingbei')
        let xilie=$('.xilie');
        let idx=0;
        let arr=[];
        let username=getCookie('key');
        let bg=$('.bg');
        console.log(bg);
    async function details(){
        let res=await pAjax({
            url:`/lol/images/lol/act/img/js/hero/${id}.js`
        })
        res=JSON.parse(res);
        console.log(res);
        let res1=await pAjax({
             url:`/lol/images/lol/act/img/js/heroList/hero_list.js`,
        })
         res1=JSON.parse(res1);
        console.log(res1);
        res1=res1.hero.filter(function(item){
            return item.heroId==id
        })[0].roles.join();
         let res2=await pAjax({
            url:`/lol/images/lol/act/img/js/starSteleList/starstele_list.js`
        })
        res2=JSON.parse(res2);
        
    // 渲染星碑数据
        
        for(let key in res2.starstele){
            arr.push(res2.starstele[key]);           
        }
        xingbeiF(idx,xingbei)
        xilie.on('click',function(e){
            if(e.target.classList.contains('diyi')){ 
                let diyi=$('.di')
                let dier=$('.dier')
                diyi.siblings().removeClass('active2')
                dier.siblings().removeClass('active2')
                e.target.classList.toggle('active2');              
                let idx=e.target.getAttribute('idx');
               xingbeiF(idx,xingbei)
            }
        })
        
       
         
       
        // 将数据中的英文替换为中文
        res1=res1.replace('fighter','战士');
        res1=res1.replace('tank','坦克');
        res1=res1.replace('marksman','射手');
        res1=res1.replace('assassin','刺客');
        res1=res1.replace('mage','法师');
        res1=res1.replace('support','辅助');
        res1= res1.split(",").map(function(item){
            return `<span class="kuang">${item}</span>`
        }).join('')
        // 遍历渲染
        for(let key in res.hero){
            // 渲染英雄属性
           power.html( `
                        <h3>${res.hero.name}</h3>
                        <h1>${res.hero.title}</h1>
                        <div>
                     ${res1}
                        </div>
                        <ul>
                            <li><span>物理攻击</span>
                                <div class="tiao">
                                    <p class="wuli"></p>
                                </div>
                            </li>
                            <li><span>魔法攻击</span>
                                <div>
                                    <p class="mofa"></p>
                                </div>
                            </li>
                            <li><span>防御能力</span>
                                <div>
                                    <p class="fangyu"></p>
                                </div>
                            </li>
                            <li><span>上手难度</span>
                                <div>
                                    <p class="shangshou"></p>
                                </div>
                            </li>
                        </ul>
                        <button class="add">加入购物车</button>
                        <button class="look">查看购物车</button>
                    
                  `)
                //   渲染背景故事
                bjgs.html(` <p>
                                  ${res.hero.shortBio}
                                </p>`)
                bjgs.append(`<button class="open">展开</button>`)
                // 展开效果
                let open=$('.open');
                let flag=true;
                open.on('click',function(){
                    if(flag==true){
                         $(this).prev().css({
                        webkitLineClamp: '100'
                    })
                    //   $(this).prev().animate({
                    //     webkitLineClamp: '100'
                    // },1000)
                    flag=false;
                    $(this).text('收起')
                    return;
                    }
                   if(flag==false){
                         $(this).prev().css({
                        webkitLineClamp: '4'
                    })
                    flag=true;
                    $(this).text('展开')
                    }
                    
                })
                // 渲染使用技巧
                let wofang;
                let difang;
               wofang= res.hero.allytips.map(function(item2){
                                        return`<li>${item2}</li>
                                       `
                                    }).join("")
               difang= res.hero.enemytips.map(function(item2){
                                        return`<li>${item2}</li>
                                       `
                                    }).join("")             
                 syjq.html(`       <div class="last1">
                                    <h3>当你使用
                                        <span>${res.hero.name}</span>
                                    </h3>
                                    <ul>
                                 ${wofang}
                  
                                    </ul>
                                </div>
                                <div class="last2">
                                    <h3>敌人使用
                                        <span>${res.hero.name}</span>
                                    </h3>
                                    <ul>
                                   ${difang}
                                        
                                    </ul>
                                </div>
                            `)
              
        }
             // 渲染皮肤 
               touxiang.html(res.skins.filter(function(item6){
                    return item6.chromas==='0'
                }).map(function(item7){
                    return `<li txt="${item7.name}"><img class="lisimg" src="${item7.iconImg}" alt=""></li>`
                }).join('')) 
                touxiang.append('<span>黑暗之女<span>');
                bg.html(res.skins.filter(function(item6){
                    return item6.chromas==='0'
                }).map(function(item7){
                    return `<li><img src="${item7.mainImg}" alt=""></li>`
                }).join(''))
                $('.touxiang li').first().addClass('active3');
              touxiang.on('click',function(e){
                if($(e.target).hasClass('lisimg')){
                   
                   $(e.target).parent().addClass('active3');
                   let txt=$(e.target).parent().attr('txt');
                   $(e.target).parent().siblings().removeClass('active3')
                    $(e.target).parent().siblings().last().text(txt )
                     let bgwidth=bg.innerWidth();
                  let long= $(e.target).parent().index();
                
                 $('.bg li').animate({
                     left:-bgwidth*long
                 },500)
                }
              })

        // 改变属性条的长度
        
        let tiao=$('.tiao');
        let long=parseInt(tiao.css('width'));
        let wuli=$('.wuli');
        let mofa=$('.mofa');
        let fangyu=$('.fangyu');
        let shangshou=$('.shangshou');
        wuli.css({
            width:`${res.hero.attack/10*long}`,
        });
        mofa.css({
            width:`${res.hero.magic/10*long}`,
        })
        fangyu.css({
            width:`${res.hero.defense/10*long}`,
        })
        shangshou.css({
            width:`${res.hero.difficulty/10*long}`,
        })

        // 循环渲染,技能介绍
       jineng.html(res.spells.map(function(item3){
            // console.log(item3);
            return` <li sym="${item3.spellKey}"><img src="${item3.abilityIconPath}" alt=""></li>`
        }).join('')) 
        // 初始技能渲染
        let chu='e';
   jinengF(chu,res);
         // 渲染技能
    $('.jineng li img')[0].parentNode.classList.add('active');
    $('.jineng li img').on('click',function(e){
         $(this).parent().addClass("active").siblings().removeClass("active");
       let sym= $(this).parent().attr('sym');
        // 过滤数据
        
        jinengF(sym,res);
    })
    // 加入购物车功能
    let add=$('.add');
    
    let hero_name=`${res.hero.name} ${res.hero.title}`
    let img=res.skins[0].iconImg;
    let price=res.hero.goldPrice
add.on('click',function(){
    if(!username){
    localStorage.setItem('url',location.href);
    let strr=confirm('您尚未登陆账号，请先登陆');
    strr?location.href='./login.html': "";
    return; 
    }
    async function addData(){
        let result=await pAjax({
            url:`/self/addCarData.php`,
            type:'post',
            data:`hero_id=${id}&username=${username}&hero_name=${hero_name}&img=${img}&price=${price}`,

        })
        result=JSON.parse(result);
        if(result.code==true){
            alert("添加购物车成功")
        }else{
            alert("添加购物车失败")
        }
        console.log(result);
    }
    addData();
})
// 查看购物车功能
    let look=$('.look');

look.on('click',function(){

    location.href='./shopcar.html'
})
    }
    details();

  

//    星碑渲染函数
    function xingbeiF(idx,xingbei){
  xingbei.html( arr.filter(function(item,index){
            return index==id
        })[0][idx]
        .childs.map(function(item){
            return`
                     
                            <div>
                                <div>
                                    <img src="${item.image}" alt="">
                                </div>
                                <h4>${item.name}</h4>
                                <img src="https://game.gtimg.cn/images/lol/v3/data/line-dec.png" alt="">
                                <p>${item.desc}</p>
                            </div>
                           
                        `
        }))
}
// 技能介绍渲染函数
function jinengF(sym,res){
    jieshao.html(res.spells.filter(function(item8){
        
            return item8.spellKey==sym;
        }).map(function(item9){
            return`<h3>${item9.name}</h3>
                                <p>${item9.description}</p>`
        }))
}

})

 

